window.onload = () => {
  // 获取html元素
  /** @type {HTMLVideoElement} */
  var video = document.getElementById("video");
  /** @type {HTMLCanvasElement} */
  var c1 = document.getElementById("c1");
  /** @type {HTMLCanvasElement} */
  var c2 = document.getElementById("c2");

  // 获取两个画布
  var ctx1 = c1.getContext("2d");
  var ctx2 = c2.getContext("2d");

  // 添加监听器
  video.addEventListener(
    "play",
    function () {
      // 点击播放之后 使用canvas开始循环画图
      // ctx1.drawImage(video, 0, 0, video.width, video.height);
      timerCallback();
    },
    false
  );

  function timerCallback() {
    // if (video.paused || video.ended) {
    //   return;
    // }
    computeFrame();
    setTimeout(function () {
      timerCallback();
    }, 0);
  }
  function computeFrame() {
    ctx1.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    let frame = ctx1.getImageData(0, 0, video.videoWidth, video.videoHeight);
    let l = frame.data.length / 4;

    for (let i = 0; i < l; i++) {
      let r = frame.data[i * 4 + 0];
      let g = frame.data[i * 4 + 1];
      let b = frame.data[i * 4 + 2];
      if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0;
    }
    ctx2.putImageData(frame, 0, 0);
    return;
  }
  // ctx1.drawImage(video, 0, 0, video.width, video.height);
};
